<template>
 <view class="coin-flip-loader">
   <view class="coin" :class="{ 'flipped': isFlipped }">
     <image class="side front" :src="frontImg"/>
     <image class="side back"  :src="behindImg"/>
    </view>
  </view>
</template>

<script>
import frontImg from '../../static/images/coin/front.png'
import behindImg from '../../static/images/coin/behind.png'
export default {
  data() {
    return {
      isFlipped: true,
      frontImg: frontImg,
      behindImg: behindImg
    };
  },
  mounted() {
    // this.startFlipAnimation();
  },
  methods: {
    startFlipAnimation() {
      setInterval(() => {
        this.isFlipped = !this.isFlipped;
      }, 5000); // 切换状态间隔时间，这里设置为1秒
    },
  },
};
</script>

<style scoped>
.coin-flip-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.coin {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 1s linear infinite;
}

.side {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.front {
  //background-color: #f8d049; /* 正面颜色 */
}

.back {
  //background-color: #3e3e3e; /* 反面颜色 */
  transform: rotateY(180deg);
}

.flipped {
  transform: rotateY(180deg);
}

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
</style>